<template>
  <div>
    <!-- 面包屑导航条 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>系统中心</el-breadcrumb-item>
      <el-breadcrumb-item>菜单管理</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card class="box-card">

      <el-row :gutter="100">
        <el-col :span="8">
          <el-tree
            :data="data"
            :expand-on-click-node="false"
            default-expand-all
            node-key="id"
            show-checkbox>
              <span class="custom-tree-node" slot-scope="{ node, data }">
                <span> <i :class="data.icon"></i> &nbsp;{{ data.menuName }}</span>
                <span>
                  <el-button
                    @click="() => append(data)"
                    size="mini"
                    type="text">
                    添加
                  </el-button>
                  <el-button
                      @click="() => getNode(node,data)"
                       size="mini"
                   type="text" v-if="data.id!=0">
                    编辑
                  </el-button>
                  <el-button
                    @click="() => remove(node, data)"
                    size="mini"
                    type="text" v-if="data.id!=0">
                   删除
                  </el-button>
                </span>
              </span>
          </el-tree>
        </el-col>
        <el-col :span="12">
          <el-card class="box-card grid-content bg-purple-light" v-if="isShow">
            <div class="clearfix" slot="header">
              <span>菜单信息</span>
              <el-button @click="saveMenu" style="float: right; padding: 2px 0" type="text">保存</el-button>
              <el-button @click="closeMenu" style="float: right; padding: 2px 0" type="text">关闭</el-button>
            </div>
            <el-form :model="menuForm" label-width="70px">
              <el-form-item label="父级菜单">
                <el-input :disabled="true" size="small" v-model="parentName"></el-input>
              </el-form-item>
              <el-form-item label="菜单图标">
                <el-input size="small" v-model="menuForm.icon"></el-input>
              </el-form-item>
              <el-form-item label="菜单名称">
                <el-input size="small" v-model="menuForm.menuName"></el-input>
              </el-form-item>
              <el-form-item label="菜单类型">
                <el-select placeholder="请选择" size="small" v-model="menuForm.menuType">
                  <el-option :value="0" label="目录"></el-option>
                  <el-option :value="1" label="菜单"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="跳转路径" v-if="menuForm.menuType==1">
                <el-input size="small" v-model="menuForm.url"></el-input>
              </el-form-item>
            </el-form>
          </el-card>
        </el-col>
      </el-row>
    </el-card>
  </div>

</template>

<script>
  export default {
    name: "Menus",
    data() {
      return {
        data: [
          {
            id: 0,
            icon: 'el-icon-s-tools',
            menuName: '用户管理系统',
            children: []
          }
        ],
        isShow: false,
        menuForm: {},
        parentName: ''
      }
    },
    methods: {
      closeMenu: function () {
        this.isShow = false;
        this.parentName = '';
        this.menuForm = {};
      },
      getTree: function () {//按照树的组件封装数据结构
        this.$http.get("/menu/getTree").then((res) => {
          if (res.data.success) {
            this.data[0].children = res.data.result;
          } else {
            this.$message.error(res.data.message);
          }
        });
      },
      saveMenu: function () {
        this.$http.post("/menu/save", this.menuForm).then((res) => {
          if (res.data.success) {
            this.$message({message: res.data.message, type: 'success'});
          } else {
            this.$message.error(res.data.message);
          }
          //关闭菜单框
          this.closeMenu();
          //渲染菜单树
          this.getTree();
        });
      },
      append: function (data) {
        this.isShow = true;
        this.parentName = data.menuName;//设置父级菜单名称
        this.menuForm.parentId = data.id; //设置父级菜单id
        if (null == data.children) {
          this.menuForm.orderNum = 0;
        } else {
          this.menuForm.orderNum = data.children.length;
        }
        //设置排序
      },
      remove: function (node, data) {//删除
        this.$http.get("/menu/delTree/" + data.id).then((res) => {
          if (res.data.success) {
            this.$message({message: res.data.message, type: 'success'});
            this.getTree();//重新加载tree
          } else {
            this.$message.error(res.data.message);
          }
        });
      },
      getNode: function (node,data) {//回显
        this.isShow=true;
        this.parentName=node.parent.data.menuName;
        this.$http.get("/menu/get/" + data.id).then((res) => {//当前节点
          if (res.data.success) {
            this.menuForm=res.data.result;
          } else {
            this.$message.error(res.data.message);
          }
        });
      }
    },
    mounted() {
      this.getTree();
    }
  }
</script>

<style lang="less" scoped>
  .el-row {
    margin-bottom: 20px;

    &:last-child {
      margin-bottom: 0;
    }
  }

  .el-col {
    border-radius: 4px;
  }

  .bg-purple-dark {
    background: #99a9bf;
  }

  .bg-purple {
    background: #d3dce6;
  }

  .bg-purple-light {
    background: #e5e9f2;
  }

  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }

  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }

  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
</style>
